{% extends "management/base.html" %}
{% block title %}基金管理{% endblock %}

{% block content %}

    <link rel="stylesheet" href="/static/css/index.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="/static/js/echarts.js"></script>
    <div class="container">
        <div class="row">
            <div class="col-md-4 ">
                <h1><strong>近期热门股票</strong></h1>
                <div id="chart">
                    <script>
                    {#初始化 echarts 对象#}
                    var mychart = echarts.init(document.getElementById('chart'));
                    {#可视化展示选项#}
                    {#var option = {#}
                    {#    xAxis: {#}
                    {#        type: 'category',#}
                    {#        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']#}
                    {#    },#}
                    {#    yAxis: {#}
                    {#        type: 'value'#}
                    {#    },#}
                    {#    series: [{#}
                    {#        data: [820, 932, 901, 934, 1290, 1330, 1320],#}
                    {#        type: 'bar'#}
                    {#    }]#}
                    {# }; #}
                    {#首先，声明两个 javascript 的数组#}
                    var series_data = [];
                    var xAxis_data = [];

                    {#使用循环，依次将数据库需要展示的数据添加到刚才声明的数组中#}
                    {% for stk in objs %}
                        series_data.push("{{stk.hold}}")
                        xAxis_data.push("{{stk.stock_code}}")
                    {% endfor %}
                    //
                    {#可视化展示选项#}
                    var option = {
                        xAxis: {
                            type: 'category',
                            name:'股票代码',
                            nameTextStyle :{
					                        fontSize: 8
				                            },
                            axisLabel:{
                                interval:0,
                                rotate:'45'
                            },
                            grid:{//直角坐标系内绘图网格
                                show:true,//是否显示直角坐标系网格。[ default: false ]
                                left:"20%",//grid 组件离容器左侧的距离。
                                right:"30px",
                                borderColor:"#c45455",//网格的边框颜色
                                bottom:"20%" //
                            },
                            {#将x轴坐标修改为数据库中的股票代码#}
                            data: xAxis_data
                        },
                        yAxis: {
                            type: 'value',
                            name:'20家机构中的持有数',
                            nameTextStyle :{
					                        fontSize: 10
				                            }

                        },
                        series: [{
                            {#将y轴的数据修改为数据库中股票持有数，即hold#}
                            data: series_data,
                            type: 'bar',
                            label: {
                                 show: true,//是否展示
                                 position: 'top',//在顶端
                            }

                        }]
                    };
                    {#将 echarts对象与展示选项结合起来#}
                    mychart.setOption(option);

                </script>
                </div>
            </div>
            <div class="col-md-5 col-md-offset-2">
                <br>
                <h1><Strong>财经消息早知道</Strong></h1>
                    <a href="#" class="list-group-item active">金融财经</a>
                    <a href="https://fund.eastmoney.com/" class="list-group-item"> 1 天天基金网</a>
                    <a href="http://finance.caijing.com.cn/" class="list-group-item"> 2 财经网 金融</a>
                    <a href="https://money.163.com/" class="list-group-item"> 3 网易财经</a>


                <br>
                <br>



                <div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" alt="First slide">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" alt="Second slide">
            <div class="carousel-caption"></div>
        </div>
        <div class="item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" alt="Third slide">
            <div class="carousel-caption"></div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
                <h2><strong>股市技术指标学习</strong></h2>
                  <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                      点击学习技术
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="http://www.75111.net/book/macdrumen/"> MACD </a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="http://www.75111.net/book/kdjrumen/">KDJ</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="http://www.75111.net/gupiao/jishu/201712/23084.html">BOLL布林线</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="http://www.75111.net/gupiao/jishu/">更多技术指标</a>
                    </div>
                  </div>
            </div>



            </div>

        </div>
    </div>

{% endblock %}